<template>
  <view class="venue-list-page">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input 
        type="text" 
        v-model="searchKey" 
        placeholder="搜索场地名称" 
        @confirm="searchVenues"
      />
    </view>

    <!-- 筛选条件 -->
    <view class="filter-bar">
      <view 
        class="filter-item" 
        :class="{ active: currentFilter === index }"
        v-for="(item, index) in filters" 
        :key="index"
        @tap="changeFilter(index)"
      >
        {{ item }}
      </view>
    </view>

    <!-- 场地列表 -->
    <view class="venue-list">
      <view 
        class="venue-item" 
        v-for="(item, index) in venueList" 
        :key="index"
        @tap="goToDetail(item)"
      >
        <image :src="item.image" mode="aspectFill" class="venue-image" />
        <view class="venue-info">
          <view class="venue-name">{{ item.name }}</view>
          <view class="venue-tags">
            <text v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{ tag }}</text>
          </view>
          <view class="venue-price">
            <text class="price">¥{{ item.price }}</text>
            <text class="unit">起</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="venueList.length === 0">
      <image src="/static/empty.png" mode="aspectFit" />
      <text>暂无相关场地</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const searchKey = ref('')
const currentFilter = ref(0)
const filters = ['综合排序', '价格最低', '价格最高', '好评优先']

// 场地列表数据
const venueList = ref([
  {
    id: 1,
    name: '玫瑰庄园',
    image: 'https://img.freepik.com/free-photo/wedding-ceremony-garden_1303-11466.jpg',
    tags: ['草坪婚礼', '提供住宿'],
    price: 19999
  },
  {
    id: 2,
    name: '海边教堂',
    image: 'https://img.freepik.com/free-photo/beautiful-wedding-ceremony-beach_1232-3083.jpg',
    tags: ['海景', '教堂婚礼'],
    price: 29999
  }
])

// 搜索场地
const searchVenues = () => {
  // 实现搜索逻辑
}

// 切换筛选条件
const changeFilter = (index) => {
  currentFilter.value = index
  // 实现筛选逻辑
}

// 跳转到详情页
const goToDetail = (venue) => {
  uni.navigateTo({
    url: `/pages/venue-detail/venue-detail?id=${venue.id}`
  })
}

// 获取页面参数
onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const type = currentPage.options.type
  if (type) {
    // 根据类型加载对应场地列表
  }
})
</script>

<style scoped>
.venue-list-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.search-bar {
  padding: 20rpx;
  background-color: #fff;
}

.search-bar input {
  background-color: #f5f5f5;
  padding: 15rpx 30rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
}

.filter-bar {
  display: flex;
  background-color: #fff;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.filter-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
}

.filter-item.active {
  color: #ff4d4f;
  font-weight: bold;
}

.venue-list {
  padding: 0 20rpx;
}

.venue-item {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.venue-image {
  width: 100%;
  height: 400rpx;
}

.venue-info {
  padding: 20rpx;
}

.venue-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.venue-tags {
  margin-bottom: 10rpx;
}

.venue-tags text {
  background-color: #f5f5f5;
  color: #666;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  margin-right: 10rpx;
}

.venue-price {
  color: #ff4d4f;
}

.venue-price .price {
  font-size: 36rpx;
  font-weight: bold;
}

.venue-price .unit {
  font-size: 24rpx;
  margin-left: 4rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
  color: #999;
}

.empty-state image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}
</style> 